<template>
<div class="mine">
  this is mine
  <br/>
  <div class="content">
    <div>
      <button @click="toMsg">我的消息</button>
      <button @click="toOrder">我的订单</button>
      <br>
      <router-link to="/mine/mine-msg">我的消息</router-link>
      <router-link to="/mine/mine-order">我的订单</router-link>
    </div>

    <router-view class="content-area"></router-view>
  </div>

</div>
</template>

<script>
import {useRouter} from 'vue-router'

export default {
  name: "Mine",
  setup(){
    const router = useRouter()

    const toMsg = ()=>{
      router.push("/mine/mine-msg")
    }
    const toOrder = ()=>{
      router.push("/mine/mine-order")
    }
    return {
      toMsg,
      toOrder
    }

  }
}
</script>

<style scoped>
.mine{
  background: #d93419;
  width: 200px;
  height: 200px;
  color: white;
}
.content{
  display: flex;
}
.content-area{
  flex: 1;
}
</style>